<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="styles/pdeditor.css" />
	<title> </title>
</head>
<body>
 <div id="pdmain" style="line-height:2;background:#fafafa;">
 	<h2 style="text-align:center;">关于pdeditor</h2>
 	<br>
 	<p>一、框架 <br />
 		&nbsp;&nbsp;&nbsp;&nbsp;1,编辑容器为可编辑的iframe,支持富文本<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;2,代码为原生JS + jQuery ，暂时未改写未封装<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;3,图片上传用了SWFupload <br />
 	</p>
 	<p>二、初始化<br/>
 		1,在文档ready后（DOM解析及iframe内生成html、body元素),对iframe进行可编辑化：contentEditable=true|designMode=on<br />
 		2,iframe绑定事件监听 <br />
 		&nbsp;&nbsp;&nbsp;&nbsp;a、粘贴过滤（paste，setTimeout(~,1)）<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;b、字数统计（keyUp,countNum)<br />
 		3，iframe内的body（变量pdbd）添加样式 pdbd.style.cssText = '~' ,添加链接样式表iframe.css<br />
 		4，SWFupload 初始化（生成实例、替换按钮）<br />
 		三、功能实现<br />
 		1,字体加粗<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;使用浏览器内置命令execCommand('bold')<br />
 		2,插入图片<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;在选择完图片后自动上传，可显示上传进度，完成之后后台返回图片路径，之后调用execCommand('insertimage')，插入位置在当前Range对象位置<br />
 		3,插入视频<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;IE： 先取得range对象位置，之后用pasteHTML方法插入HTML代码,若为.swf格式自动加上视频标签embed<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;其他浏览器：调用execCommand('insertHTML')方法,（火狐下无法预览？）<br />
 		4,字数统计<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;监听keyup事件，并在粘贴、恢复内容之后调用，对于右键--剪切的操作无法捕捉<br />
 		5,内容恢复<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;优先使用浏览器的window.localStorage功能，【HTML5属性，除IE6、IE7外的浏览器均支持】,每5秒保存一次<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;对于不支持localStorage的浏览器，使用userData存储<br />
 		6，粘贴过滤<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;在粘贴完后，对文档全部内容进行标签过滤<br />
 		span,font,style,table,tr,td,form,textarea,<br />
 		(做的比较水，因为IE8以后，如果读剪贴板的话会先弹出权限对话框，而FF中不允许访问粘贴板，只有等粘贴完成后再对文档内容进行操作，百度Ueditor的实现是通过屏蔽右键粘贴，之后操作DOM,Selection，Range对象实现的，比较复杂，技术不过关的话会有BUG）<br />
 		<br>
 		四、待改进<br />
 		&nbsp;&nbsp;&nbsp;&nbsp;1,代码原生化并封装<br />		
 		&nbsp;&nbsp;&nbsp;&nbsp;2,粘贴过滤优化   <br />

 </div>
</body>
</html>
